<template>
	<view class="logo">
		<view class="logo-hd">
			<image src="http://storage.dezhoucloud.com/img/zhuce.png" mode="widthFix"></image>
			<view class="logo-hd-h1">
				医圈子医院（患者）
			</view>
			<view class="logo-hd-h3">
				生命至上,医者仁心
			</view>
		</view>
		<view class="logo-center">
			<uni-forms ref="form" :modelValue="forms" :rules="rules">
				<uni-forms-item name="uloginname">
					<uni-easyinput v-model="forms.uloginname" placeholder="请输入账号" />
				</uni-forms-item>

				<uni-forms-item name="upassword">
					<uni-easyinput type="password" v-model="forms.upassword" placeholder="请输入密码"></uni-easyinput>
				</uni-forms-item>

				<uni-forms-item name="unickname">
					<uni-easyinput v-model="forms.unickname" placeholder="请输入昵称"></uni-easyinput>
				</uni-forms-item>

				<uni-forms-item name="phone">
					<uni-easyinput v-model="forms.phone" placeholder="请输入手机号" />
				</uni-forms-item>


				<uni-forms-item name="age">
					<uni-easyinput v-model="forms.age" placeholder="请输入年龄"></uni-easyinput>
				</uni-forms-item>


				<uni-forms-item name="name">
					<uni-easyinput v-model="forms.name" placeholder="请输入姓名"></uni-easyinput>
				</uni-forms-item>

				<uni-forms-item name="gender">
					<view>
						<view class="title-gender">性别</view>
						<uni-data-checkbox v-model="forms.gender" :localdata="sexs"></uni-data-checkbox>
					</view>
				</uni-forms-item>



				<uni-forms-item name="ucardid">
					<uni-easyinput v-model="forms.ucardid" placeholder="请输入身份证" />
				</uni-forms-item>

			</uni-forms>
		</view>
		<view class="logo-db">
			<view class="logo-db-dl" @click="getFn">
				返回
			</view>
			<view class="logo-db-dl" @click="getApp">
				完成
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
	} from 'vuex';
	import {
		formPas,
		formMobile,
	} from "@/utils/myFun.js";
	export default {
		data() {
			return {
				test: '登录',
				form: {
					username: '', //用户名
					password: '', //密码
				},
				// 单选数据源
				sexs: [{
					text: '男',
					value: 1
				}, {
					text: '女',
					value: 2
				}],
				//注册
				forms: {
					ubirthday: 0, //
					uloginname: '', //名字
					unickname: '',
					// username: '', //用户名
					upassword: '', //密码
					usex: '',
					phone: '',
				},
				rules: {
					uloginname: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}, ],
						validateTrigger: 'sunmit'
					},
					unickname: {
						rules: [{
							required: true,
							errorMessage: '请输入昵称',
						}, ],
						validateTrigger: 'sunmit'
					},
					gender: {
						rules: [{
							required: true,
							errorMessage: '请输入性别',
						}, ],
						validateTrigger: 'sunmit'
					},
					ucardid: {
						rules: [{
								required: true,
								errorMessage: '请输入身份证',
							},
							{
								validateFunction: (rule, value, data, callback) => {

									// 正则表达式模式
									const pattern =
										/^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

									// 验证身份证号码是否符合模式
									if (!pattern.test(value)) {
										callback('请填写正确的身份证格式')
										return false;
									}

									// 验证身份证号码的校验位
									const checkCodeArr = value.split('');
									const weightFactor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
									const checkCodeList = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3',
										'2'
									];
									let sum = 0;
									for (let i = 0; i < 17; i++) {
										sum += Number(checkCodeArr[i]) * weightFactor[i];
									}
									const mod = Number(sum) % 11;
									const checkCode = checkCodeList[Number(mod)];
									if (checkCode.toUpperCase() !== checkCodeArr[17].toUpperCase()) {
										callback('请填写正确的身份证格式')
										return false;
									}

									return true;
								}
							}
						],
						validateTrigger: 'sunmit'
					},
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号',
							},
							{
								validateFunction: (rule, value, data, callback) => {
									const phone = /^1([38]\d|4[579]|5[0-35-9]|6[2567]|7[0-8]|9[189])\d{8}$/;

									if (value.length < 11) {
										callback("手机号仅支持中国大陆11位！");
										return false;
									}

									if (!phone.test(value)) {
										callback("手机号输入错误，请仔细检查重新输入！");
										return false;
									}
									return true;
								}
							},
						],
						validateTrigger: 'sunmit'
					},
					upassword: {
						rules: [{
								required: true,
								errorMessage: '请输入密码',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									const regex = /^(?=.*[a-zA-Z])[a-zA-Z0-9]{8,12}$/;
									if (!regex.test(value)) {
										callback('密码必须包含字母且长度在8到12个字符之间')
										return false;
									}
									return true
								}
							},
						],
						validateTrigger: 'sunmit'
					},
					age: {
						rules: [{
								required: true,
								errorMessage: '请输入年龄',
							},
							{
								validateFunction: (rule, value, data, callback) => {
									if (value > 10) {
										return true
									} else {
										callback('年龄必须大于10岁')
										return false
									}
								}
							}
						],
						validateTrigger: 'sunmit'
					},
				},
				value: '',
			};
		},
		methods: {
			/* 返回  */
			getFn() {
				uni.redirectTo({
					url: '/pages/logo/logo'
				});
			},
			/* 完成注册 */
			getApp() {
				let that = this;
				this.$refs.form.validate().then(res => {
					let re = that.$API.authApi.register(that.forms).then(e => {
						console.log(e + '+++++++++++++++++++');
						if (e == null) {
							console.log("tiaoz");
							uni.redirectTo({
								url: '/pages/logo/logo'
							});
						} else {
							console.log('re no exist');
						}
					});

				}).catch(err => {
					console.log('失败：', err);
				})
			},



			showData() {
				let that = this
				if (that.forms.ubirthday) {
					return uni.$u.timeFormat(that.forms.ubirthday || 0, 'yyyy年mm月dd日')
				} else {
					return '请输入出生日期'
				}
			},
			setWord(num) {
				switch (num) {
					case 0:
						return `未知`;
						break;
					case 1:
						return `男`;
						break;
					case 2:
						return `女`;
						break;
					default:
						break;
				}
			},
			/* sex */
			yesOrNo1() {
				let that = this;
				uni.showActionSheet({
					itemList: ["未知", "男", "女"],
					success: function(res) {
						console.log(res, "yesRes");
						let index = res.tapIndex;
						that.forms.usex = index;
						console.log("选中了第" + (res.tapIndex + 1) + "个按钮");
					},
					fail: function(res) {
						console.log(res.errMsg);
					},
				});
			},
			/* 日期 */
			change(e) {
				this.forms.ubirthday = e
				console.log('change事件:', e);
			},
			changeLog(e) {
				console.log('change事件:', e);
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
		},
		onReady() {
			// 需要在onReady中设置规则
			console.log(this.$refs.form)
			this.$refs.form.setRules(this.rules)
			console.log(this.rules)
		}

	}
</script>

<style lang="scss" scoped>
	.logo {
		padding: 70rpx 30rpx;

		.logo-hd {
			text-align: center;

			image {
				width: 100rpx;
				margin: auto;
			}

			.logo-hd-h1 {
				font-size: 40rpx;
				color: #000000;
				font-weight: 600;
				letter-spacing: 5rpx;
				line-height: 64rpx;
			}

			.logo-hd-h3 {
				font-size: 27rpx;
				letter-spacing: 5rpx;
				color: #666;
			}
		}

		.logo-center {
			margin-top: 120rpx;

			::v-deep .uni-easyinput__placeholder-class {
				font-size: 28rpx;
			}

			::v-deep .uni-forms-item__content {
				font-size: 28rpx;
			}

			::v-deep .uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text {
				font-size: 28rpx;
			}

			::v-deep .uni-data-checklist .checklist-group .checklist-box .radio__inner {
				width: 30rpx;
				height: 30rpx;
			}

			::v-deep .uni-easyinput__content-input {
				border-bottom: 1rpx solid #D8D8D8;
				font-size: 30rpx;
				height: 80rpx;
			}

			::v-deep .is-input-border {
				border: 0;
			}

			.logo-center-nr {
				letter-spacing: 5rpx;
				font-size: 23rpx;
				display: flex;
				justify-content: space-between;
				color: #555;

				text {
					color: #0091FF;
				}

				.zhuces {
					color: #0091FF;

				}

				::v-deep .uni-radio-input {
					width: 30rpx;
					height: 30rpx
				}
			}
		}

		.logo-db {
			margin-top: 112rpx;

			.logo-db-dl {
				background-color: #0091FF;
				color: #fff;
				line-height: 90rpx;
				text-align: center;
				border-radius: 48rpx;
				margin-bottom: 30rpx;
			}
		}
	}

	.zhuces {
		display: flex;

		button {
			width: 46% !important;
		}
	}

	.loginContent {
		padding: 50rpx;

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20upx;

			view {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.box {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 150rpx;
		}

		.box-tu image {
			width: 184rpx;
			height: 184rpx;
			border-radius: 50%;
			margin-bottom: 162rpx;
		}

		uni-button {
			font-size: $uni-font-size-lg;
			font-weight: 600;
			color: #fff;
		}

		uni-button[type=default] {
			min-height: 90rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-color: red;
			margin-top: 20rpx;
		}

		button {
			width: 100%;
		}

		.haoma {
			color: #666;
			font-size: 35rpx;
			margin-top: 50rpx;
		}

		.haoma2 {
			min-height: 45px;
			height: 45px;
			line-height: 45px;
			background-color: #7976E9;
			text-align: center;
			color: #fff;
			margin-bottom: 20px;
		}

		.placeholder {
			color: #ccc;
		}

	}

	.password-login {
		padding: 30upx 0;

		.input-box {
			padding: 0 50upx;
			// border-bottom: 1upx solid #f0f0f0;
			margin-bottom: 50upx;

			input {
				// padding: 27upx 0;
				font-size: 40upx;
				color: #333;
				font-weight: bold;
				height: 100rpx !important;
			}

		}

		.zhucetiaoting {
			text-align: center;
			margin-bottom: 80upx;
			color: #7976E9;
			font-weight: 700;
		}

		.zhucea {
			margin-bottom: 20rpx;
		}
	}

	.zhuce {
		margin-top: 500rpx;
	}


	.uni-icons {
		margin-right: 10rpx;
	}

	.uni-input {
		height: 50 !important;
	}

	.title-gender {
		margin-bottom: 20rpx;
		font-size: 30 rpx;
	}
</style>